<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript">
			//模板字符串表示普通字符串
			//ES5，使用+进行连接
			// var message="习近平新时代中国特色社会主义思想是当代"+
			// "中国马克思主义、二十一世纪马克思主义。";
			//ES5,使用JavaScript的bug(反斜杠)
			// var message2="习近平新时代中国特色社会主义思想是当代\
			// 中国马克思主义、二十一世纪马克思主义。";
			//ES6,(反引号+反斜杠)
			// var message3=`习近平新时代中国特色社会主义思想是当代\
			// 中国马克思主义、二十一世纪马克思主义。`;
			// console.log(message);
			// console.log(message2);
			// console.log(message3);		//浏览器在执行时将"\n"解析为回车换行，其余内容原样输出。
			
			//模板字符串表示多行字符串
			//ES5用\n进行分段
			// var message = "听党指挥"+"\n"+"能打胜仗"+"\n"+"作风优良";
			//ES6
			// let message2 = `听党指挥
			// 能打胜仗
			// 作风优良`;
			// console.log(message);
			// console.log(message2);
			
			//模板字符串中插入变量和表达式
			// let name = "Mike";
			// let age = 20;
			// let info = `My Name is ${name},I am${age+1}years old next year.`
			// console.log(info);
			//My Name is Mike,I am 21 years old next year.
			
			//模板字符串应用-采购小助手
			$("#submit").click(function(e){
				e.preventDefault();
				var today = new Date();
				var name = $("#name").val();
				var price = $("#price").val();
				var amount = $("#amount").val();
				var str = `<div class="card">
								<div class="card-body">
								<h5 class="card-title">
								${today.getFullYear()}年${
									today.getMonth() + 1
								}月${today.getDate()}日
								</h5>
			<p class="card-text">物资: ${name}, 单价: ${price}元, 数量: ${amount}</p>
			<p class="card-text">共计: ${price * amount}元</p>
						</div>
					</div>`;
				$("#history-list").prepend($(str));
				$("#form")[0].reset();
			});
		</script>
	</body>
</html>